<template>
  <div class="page-container">
    <!-- 绑定邀请人弹窗 -->
    <van-popup v-model:show="showBindPopup" position="bottom" round closeable :style="{ height: '35%', maxWidth: '800px', left: '50%', transform: 'translateX(-50%)' }">
      <div class="bind-inviter-popup">
        <h3 class="popup-title">绑定邀请人</h3>
        <van-field
          v-model="inviterCode"
          label="邀请码"
          placeholder="请输入邀请人的邀请码"
          :rules="[{ required: true, message: '请输入邀请码' }]"
        />
        <div class="popup-actions">
          <van-button block type="primary" @click="bindInviter">确认绑定</van-button>
        </div>
      </div>
    </van-popup>
    
    <!-- 用户资料 -->
    <div class="user-profile">
      <div class="profile-header">
        <!-- 用户头像 - 圆形显示昵称前三个字 -->
        <div class="avatar-container" :class="{ 'vip-avatar': userInfo.isVip }">
          <div class="avatar-circle">
            {{ getInitials(userInfo.avatar) }}
          </div>
          <div class="vip-badge" @click="navigateToVip">
            <van-icon name="diamond-o" />
          </div>
        </div>
        
        <div class="user-info">
          <!-- 钱包地址 -->
          <div class="user-id">
            <span class="copyable" @click="copyAddress(userInfo.address)">{{ formatUserAddress(userInfo.address) }}</span>
            <van-icon name="copy-o" class="copy-icon" @click="copyAddress(userInfo.address)" />
          </div>
          
          <!-- 会员信息 -->
          <div class="user-vip">
            <van-tag type="warning" class="vip-tag" @click="navigateToVip">VIP {{ userInfo.vipLevel }}</van-tag>
            <span class="vip-since copyable" @click="copyAddress(userInfo.shortAddress)">会员 · {{ userInfo.shortAddress }}</span>
          </div>
          
          <!-- 邀请码 -->
          <div class="user-invite">
            <span class="invite-label">邀请码:</span>
            <span class="invite-code copyable" @click="copyAddress(userInfo.inviteCode)">{{ userInfo.inviteCode || '未绑定' }}</span>
          </div>
          <!-- 邀请码人 -->
          <div class="user-invite" v-if="userInfo.inviter === '' && userInfo.inviteCode != '000000'">
            <span class="invite-label">邀请人:</span>
            <span class="invite-code" :class="{'copyable': userInfo.inviter, 'bind-inviter': !userInfo.inviter}" @click="userInfo.inviter ? copyAddress(userInfo.inviter) : showBindInviterPopup()">
              {{ userInfo.inviter || '未绑定' }}
            </span>
          </div>
        </div>
        
        <van-button 
          icon="setting-o" 
          round 
          plain 
          size="small" 
          class="settings-button"
          @click="navigateTo('/settings')" 
        />
      </div>
    </div>
    
    <!-- 快捷服务 - 合并账户操作和其他服务 -->
    <div class="card service-card">
      <div class="service-grid">
        <div class="service-item" @click="goToDepositPage()">
          <div class="service-icon deposit">
            <van-icon name="balance-o" />
          </div>
          <span>充值</span>
        </div>
        <div class="service-item" @click="goToWithdrawPage()">
          <div class="service-icon withdraw">
            <van-icon name="cash-back-record" />
          </div>
          <span>提现</span>
        </div>
        <div class="service-item" @click="navigateTo('/circulation')">
          <div class="service-icon transfer">
            <van-icon name="exchange" />
          </div>
          <span>划转</span>
        </div>
        <div class="service-item" @click="navigateTo('/record')">
          <div class="service-icon record">
            <van-icon name="records" />
          </div>
          <span>流水</span>
        </div>
        <div class="service-item" @click="navigateTo('/finance')">
          <div class="service-icon finance">
            <van-icon name="gold-coin-o" />
          </div>
          <span>理财</span>
        </div>
        <div class="service-item" @click="navigateTo('/mining')">
          <div class="service-icon mining">
            <van-icon name="cluster-o" />
          </div>
          <span>挖矿</span>
        </div>
        <div class="service-item" @click="navigateTo('/team')">
          <div class="service-icon team">
            <van-icon name="friends-o" />
          </div>
          <span>团队管理</span>
        </div>
        <!-- <div class="service-item" @click="navigateTo('/performance')">
          <div class="service-icon performance">
            <van-icon name="chart-trending-o" />
          </div>
          <span>业务绩效</span>
        </div> -->
        <!-- <div class="service-item" @click="navigateTo('/more')">
          <div class="service-icon more">
            <van-icon name="apps-o" />
          </div>
          <span>其他</span>
        </div> -->
      </div>
    </div>
    
    <!-- 账户信息 -->
    <div class="card">
      <div class="section-header">
        <h2 class="section-title">账户信息</h2>
        <div class="view-all" @click="navigateTo('/record')">
          <span>流水记录</span>
          <van-icon name="arrow" />
        </div>
      </div>
      
      <!-- 币种列表 -->
      <div class="accounts-list">
        <van-collapse v-model="activeAccount">
          <van-collapse-item 
            v-for="(account, index) in accountsInfo" 
            :key="account.id"
            :name="index"
          >
            <template #title>
              <div class="account-header">
              <div class="account-icon" :class="getCurrencyColorClass(account.icon)">
                <span class="currency-text">{{ getCurrencyText(account.icon) }}</span>
              </div>
                <div class="account-details">
                  <div class="account-name">{{ account.name }}</div>
                  <div class="account-balance-row">
                    <span class="account-balance">余额: {{ formatNumber(account.balance) }} </span>
                    <span class="account-frozen">冻结: {{ formatNumber(account.frozen) || '0.00' }}</span>
                  </div>
                </div>
              </div>
            </template>
            
            <div class="account-summary">
              <div class="summary-item">
                <span class="summary-label">总收入</span>
                <span class="summary-value income">+{{ formatNumber(account.totalIn) || '0.00' }}</span>
              </div>
              <div class="summary-divider"></div>
              <div class="summary-item">
                <span class="summary-label">总支出</span>
                <span class="summary-value expense">-{{ formatNumber(account.totalOut) || '0.00' }}</span>
              </div>
            </div>
            
            <div class="account-actions" v-if="account.icon !== 'HDFS'">
              <div class="action-btn deposit-btn" @click.stop="goToDepositPage(account.icon)">
                充值
              </div>
              <div class="action-btn withdraw-btn" @click.stop="goToWithdrawPage(account.icon)">
                提现
              </div>
            </div>
          </van-collapse-item>
        </van-collapse>
      </div>
    </div>
    
    
    <!-- 订单管理 - 放在最下面 -->
    <div class="card">
      <div class="section-header">
        <h2 class="section-title">我的订单</h2>
        <div class="view-all" @click="navigateTo('/orders')">
          <span>全部订单</span>
          <van-icon name="arrow" />
        </div>
      </div>
      
      <van-tabs v-model:active="activeOrderTab" @change="handleOrderTabChange">
        <van-tab title="全部">
          <div class="order-list" v-if="orders.length > 0">
            <OrderCard 
              v-for="order in orders.slice(0, MAX_ORDERS_TO_SHOW)" 
              :key="order.id" 
              :order="order"
              @click="goToOrderDetail(order.id)"
              @pay="handlePayOrder(order)"
              @confirm="handleConfirmOrder(order.id)"
              @cancel="handleCancelOrder(order.id)"
              @refund="handleRefundOrder(order.id)"
              @detail="goToOrderDetail(order.id)"
            />
            
            <div v-if="orders.length > MAX_ORDERS_TO_SHOW" class="view-more">
              <van-button 
                plain 
                type="primary" 
                block
                @click="navigateTo('/orders')"
              >
                查看全部 {{ orders.length }} 个订单
              </van-button>
            </div>
          </div>
          <van-empty v-else class="mini-empty" description="暂无订单" />
        </van-tab>
        <van-tab title="待支付">
          <div class="order-list" v-if="pendingOrders.length > 0">
            <OrderCard 
              v-for="order in pendingOrders.slice(0, MAX_ORDERS_TO_SHOW)" 
              :key="order.id" 
              :order="order"
              @click="goToOrderDetail(order.id)"
              @pay="handlePayOrder(order)"
              @cancel="handleCancelOrder(order.id)"
              @detail="goToOrderDetail(order.id)"
            />
            
            <div v-if="pendingOrders.length > MAX_ORDERS_TO_SHOW" class="view-more">
              <van-button 
                plain 
                type="primary" 
                block
                @click="navigateTo('/orders?status=pending')"
              >
                查看全部 {{ pendingOrders.length }} 个待支付订单
              </van-button>
            </div>
          </div>
          <van-empty v-else class="mini-empty" description="暂无待支付订单" />
        </van-tab>
        <van-tab title="待发货">
          <div class="order-list" v-if="paidOrders.length > 0">
            <OrderCard 
              v-for="order in paidOrders.slice(0, MAX_ORDERS_TO_SHOW)" 
              :key="order.id" 
              :order="order"
              @click="goToOrderDetail(order.id)"
              @cancel="handleCancelOrder(order.id)"
              @detail="goToOrderDetail(order.id)"
            />
            
            <div v-if="paidOrders.length > MAX_ORDERS_TO_SHOW" class="view-more">
              <van-button 
                plain 
                type="primary" 
                block
                @click="navigateTo('/orders?status=paid')"
              >
                查看全部 {{ paidOrders.length }} 个待发货订单
              </van-button>
            </div>
          </div>
          <van-empty v-else class="mini-empty" description="暂无待发货订单" />
        </van-tab>
        <van-tab title="待收货">
          <div class="order-list" v-if="shippingOrders.length > 0">
            <OrderCard 
              v-for="order in shippingOrders.slice(0, MAX_ORDERS_TO_SHOW)" 
              :key="order.id" 
              :order="order"
              @click="goToOrderDetail(order.id)"
              @confirm="handleConfirmOrder(order.id)"
              @detail="goToOrderDetail(order.id)"
            />
            
            <div v-if="shippingOrders.length > MAX_ORDERS_TO_SHOW" class="view-more">
              <van-button 
                plain 
                type="primary" 
                block
                @click="navigateTo('/orders?status=shipping')"
              >
                查看全部 {{ shippingOrders.length }} 个待收货订单
              </van-button>
            </div>
          </div>
          <van-empty v-else class="mini-empty" description="暂无待收货订单" />
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { showToast, showLoadingToast, showDialog, closeToast } from 'vant'
import { getUserInfo, getUserOrders, getUserWallet, bindInviterCode } from '@/api/user'
import { confirmReceived, cancelOrder, applyRefund } from '@/api/order'
import { OrderStatus } from '@/utils/orderStatus'
// 引入上传图片组件
import { ImagePreview } from 'vant'
import OrderCard from '@/components/OrderCard.vue'
import {formatNumber} from '@/utils/utils'

const router = useRouter()
const activeOrderTab = ref(0)
const activeAccount = ref([])

// 绑定邀请人相关
const showBindPopup = ref(false)
const inviterCode = ref('')

// 每个标签页最多显示的订单数量
const MAX_ORDERS_TO_SHOW = 2

// 状态变量
const loading = ref({
  userInfo: false,
  orders: false,
  accounts: false
})

// 用户信息
const userInfo = ref({
  address: '',
  shortAddress: '',
  avatar: '',
  inviteCode: '',
  inviter:'',
  isVip: false,
  vipLevel: 0,
  createdAt: ''
})

// 多个账户信息
const accountsInfo = ref([])

// 订单数据
const orders = ref([])

// 初始化数据
const initData = async () => {
  await Promise.all([
    fetchUserInfo(),
    fetchOrders(),
    fetchAccounts()
  ])
}

// 获取用户信息
const fetchUserInfo = async () => {
  loading.value.userInfo = true
  try {
    const res = await getUserInfo()
    if (res.code === 0 && res.data) {
      userInfo.value = {
        address: res.data.address,
        shortAddress: res.data.walletCode,
        avatar: res.data.userName,
        inviteCode: res.data.inviteCode,
        isVip: res.data.userLevel > 0,
        vipLevel: res.data.userLevel,
        createdAt: res.data.createdAt,
        inviter: res.data.inviter
      }
    } else {
      showToast(res.message || '获取用户信息失败')
    }
  } catch (error) {
    console.error('获取用户信息失败:', error)
    showToast('获取用户信息失败，请稍后重试')
  } finally {
    loading.value.userInfo = false
  }
}

// 获取订单列表
const fetchOrders = async () => {
  loading.value.orders = true
  try {
    const params = { 
      page: 1, 
      size: 10
    }
    
    const res = await getUserOrders(params)
    if (res.code === 0 && res.data) {
      orders.value = res.data.list
    } else {
      showToast(res.message || '获取订单列表失败')
    }
  } catch (error) {
    console.error('获取订单列表失败:', error)
    showToast('获取订单列表失败，请稍后重试')
  } finally {
    loading.value.orders = false
  }
}

// 刷新订单列表
const refreshOrders = () => {
  if (loading.value.orders) return
  fetchOrders()
}

// 处理订单标签页切换
const handleOrderTabChange = (index) => {
  // 不需要重新加载数据，因为我们已经有了所有订单
  // 只在切换到全部标签时重新加载
  if (index === 0) {
    fetchOrders()
  }
}

// 获取账户信息
const fetchAccounts = async () => {
  loading.value.accounts = true
  try {
    const res = await getUserWallet()
    if (res.code === 0 && res.data) {
      // 为每个账户添加冻结金额和总收支数据（模拟数据）
      accountsInfo.value = res.data.map(account => ({
        ...account,
      }));
    } else {
      showToast(res.message || '获取账户信息失败')
    }
  } catch (error) {
    console.error('获取账户信息失败:', error)
    showToast('获取账户信息失败，请稍后重试')
  } finally {
    loading.value.accounts = false
  }
}

// 计算属性
const pendingOrders = computed(() => orders.value.filter(o => o.status === OrderStatus.PENDING))
const paidOrders = computed(() => orders.value.filter(o => o.status === OrderStatus.PAID))
const shippingOrders = computed(() => orders.value.filter(o => o.status === OrderStatus.SHIPPING))

// 获取币种文本（前4个字母）
const getCurrencyText = (currency) => {
  if (!currency) return 'COIN';
  return currency.substring(0, 4);
}

// 获取币种背景颜色类
const getCurrencyColorClass = (currency) => {
  // 根据币种名称的第一个字符的ASCII码来确定颜色
  if (!currency) return 'bg-default';
  
  const firstChar = currency.charCodeAt(0);
  
  // 根据ASCII码值模3来随机分配3种颜色
  const colorIndex = firstChar % 3;
  
  switch (colorIndex) {
    case 0:
      return 'bg-green'; // 绿色
    case 1:
      return 'bg-blue'; // 蓝色
    case 2:
      return 'bg-gold'; // 金黄色
    default:
      return 'bg-default';
  }
}

// 路由监听器
let unwatch = null

// 组件挂载时初始化数据
onMounted(() => {
  initData()
  
  // 监听路由变化，当从售后申请页面返回时刷新订单列表
  unwatch = router.afterEach((to, from) => {
    if (from.path.includes('/refund') && to.path === '/mine') {
      refreshOrders()
    }
    // 从支付页面返回时也刷新订单列表
    if (from.path.includes('/payment') && to.path === '/mine') {
      refreshOrders()
    }
  })
})

// 组件卸载时移除路由监听
onUnmounted(() => {
  if (unwatch) {
    unwatch()
  }
})

// 获取用户昵称的前三个字符作为头像
const getInitials = (address) => {
  if (!address) return '用户';
  
  // 如果是钱包地址格式，取中间部分
  if (address.length > 3) {
    return address.substring(0, 2).toUpperCase();
  }
  
  // 否则取前三个字符
  return address.substring(0, 3);
};

// 格式化钱包地址显示
const formatUserAddress = (address) => {
  if (!address) return '';
  
  // 如果地址已经是短格式，直接返回
  if (address.length < 15) return address;
  
  // 否则格式化为 0x1234...5678 格式
  return `${address.substring(0, 6)}...${address.substring(address.length - 4)}`;
};

// 跳转到VIP页面
const navigateToVip = () => {
  router.push('/vip');
};

// 显示绑定邀请人弹窗
const showBindInviterPopup = () => {
  inviterCode.value = '';
  showBindPopup.value = true;
}

// 绑定邀请人
const bindInviter = async () => {
  if (!inviterCode.value.trim()) {
    showToast('请输入邀请码');
    return;
  }
  
  showLoadingToast({
    message: '绑定中...',
    forbidClick: true,
  });
  
  try {
    const res = await bindInviterCode({inviteCode:inviterCode.value});
    if (res.code === 0) {
      showToast('绑定成功');
      showBindPopup.value = false;
      // 重新获取用户信息
      fetchUserInfo();
    } else {
      showToast(res.message || '绑定失败');
    }
  } catch (error) {
    console.error('绑定邀请人失败:', error);
    showToast('绑定失败，请稍后重试');
  } finally {
    closeToast();
  }
}

// 复制地址到剪贴板
const copyAddress = (address) => {
  if (!address) {
    showToast('没有可复制的内容');
    return;
  }
  
  // 使用参数中的地址，如果没有则使用用户信息中的地址
  const textToCopy = address || userInfo.value.address;
  
  // 创建一个临时的输入框元素
  const input = document.createElement('input');
  // 设置输入框的值为要复制的文本
  input.value = textToCopy;
  // 将输入框添加到文档中
  document.body.appendChild(input);
  // 选择输入框中的所有文本
  input.select();
  input.setSelectionRange(0, 99999); // 兼容移动设备
  
  try {
    // 尝试使用document.execCommand进行复制
    const successful = document.execCommand('copy');
    if (successful) {
      showToast('复制成功');
    } else {
      throw new Error('复制命令执行失败');
    }
  } catch (err) {
    console.error('复制失败:', err);
    
    // 尝试使用现代API
    if (navigator.clipboard) {
      navigator.clipboard.writeText(textToCopy)
        .then(() => showToast('复制成功'))
        .catch(() => {
          showToast('复制失败，请长按手动复制');
          // 显示弹窗让用户手动复制
          showCopyDialog(textToCopy);
        });
    } else {
      showToast('复制失败，请长按手动复制');
      // 显示弹窗让用户手动复制
      showCopyDialog(textToCopy);
    }
  } finally {
    // 从文档中移除临时输入框
    document.body.removeChild(input);
  }
}

// 显示复制弹窗
const showCopyDialog = (text) => {
  import('vant').then(({ Dialog }) => {
    Dialog.alert({
      title: '复制地址',
      message: text,
      confirmButtonText: '关闭'
    });
  });
}

const goToDepositPage = (currency) => {
  router.push(`/deposit${currency ? `?currency=${currency}` : ''}`)
}

const goToWithdrawPage = (currency) => {
  router.push(`/withdraw${currency ? `?currency=${currency}` : ''}`)
}

const goToTransactionsPage = (currency) => {
  router.push(currency ? `/record?currency=${currency}` : '/record')
}

// 订单详情页
const goToOrderDetail = (id) => {
  router.push(`/order/${id}`)
}

// 处理支付订单
const handlePayOrder = (order) => {
  showLoadingToast({
    message: '正在跳转支付...',
    forbidClick: true,
  })
  
  // 跳转到支付页面
  router.push(`/payment?orderId=${order.id}&amount=${order.amount}`)
  
  // 延迟关闭加载提示，确保跳转已开始
  setTimeout(() => {
    closeToast()
  }, 500)
}

// 处理确认收货
const handleConfirmOrder = (orderId) => {
  showDialog({
    title: '确认收货',
    message: '确认已收到商品吗？确认后订单将完成',
    showCancelButton: true,
    confirmButtonText: '确认收货',
    cancelButtonText: '取消'
  }).then(() => {
    showLoadingToast({
      message: '处理中...',
      forbidClick: true,
    })
    
    confirmReceived(orderId).then(res => {
      if (res.code === 0) {
        showToast('确认收货成功')
        // 直接刷新订单列表
        refreshOrders()
      } else {
        showToast(res.message || '操作失败')
      }
    }).catch(err => {
      console.error('确认收货失败:', err)
      showToast('确认收货失败，请稍后重试')
    }).finally(() => {
      closeToast()
    })
  }).catch(() => {
    // 用户取消操作
  })
}

// 处理取消订单
const handleCancelOrder = (orderId) => {
  showDialog({
    title: '取消订单',
    message: '确认要取消该订单吗？',
    showCancelButton: true,
    confirmButtonText: '确认取消',
    cancelButtonText: '关闭'
  }).then(() => {
    showLoadingToast({
      message: '处理中...',
      forbidClick: true,
    })
    
    cancelOrder(orderId, '用户主动取消').then(res => {
      if (res.code === 0) {
        showToast('订单已取消')
        // 直接刷新订单列表
        refreshOrders()
      } else {
        showToast(res.message || '操作失败')
      }
    }).catch(err => {
      console.error('取消订单失败:', err)
      showToast('取消订单失败，请稍后重试')
    }).finally(() => {
      closeToast()
    })
  }).catch(() => {
    // 用户取消操作
  })
}

// 处理申请售后
const handleRefundOrder = (orderId) => {
  showDialog({
    title: '申请售后',
    message: '确认要申请售后处理吗？',
    showCancelButton: true,
    confirmButtonText: '确认申请',
    cancelButtonText: '取消'
  }).then(() => {
    // 跳转到售后申请页面，并标记来源为首页
    router.push({
      path: '/refund',
      query: {
        orderId: orderId,
        from: 'mine'
      }
    })
  }).catch(() => {
    // 用户取消操作
  })
}

const navigateTo = (path) => {
  router.push(path)
}
</script>

<style scoped>
/* 用户资料样式 */
.user-profile {
  background-color: white;
  border-radius: 16px;
  padding: 20px;
  margin: 12px;
  margin-bottom: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.profile-header {
  display: flex;
  align-items: center;
}

/* 头像样式 */
.avatar-container {
  position: relative;
  margin-right: 16px;
}

.avatar-circle {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

.vip-avatar::after {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  z-index: -1;
}

.vip-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #ff8c00;
  color: white;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
  cursor: pointer;
  transition: transform 0.2s;
}

.vip-badge:active {
  transform: scale(0.9);
}

/* 用户信息样式 */
.user-info {
  flex: 1;
}

.user-id {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.user-id span {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-right: 8px;
}

.copy-icon {
  color: #666;
  font-size: 16px;
  padding: 4px;
  cursor: pointer;
}

.copy-icon:hover {
  color: #2575fc;
}

.user-vip {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.vip-tag {
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  color: white;
  border: none;
  font-weight: bold;
  padding: 2px 8px;
}

.vip-since {
  margin-left: 8px;
  font-size: 12px;
  color: #666;
}

.user-invite {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #666;
}

.invite-label {
  margin-right: 4px;
}

.invite-code {
  font-weight: 500;
  color: #333;
  background-color: #f5f5f5;
  padding: 2px 8px;
  border-radius: 4px;
}

/* 设置按钮样式 */
.settings-button {
  border-color: #ddd;
  color: #666;
}

.page-container {
  padding-bottom: 60px;
  background-color: #f5f7fa;
  max-width: 800px;
  margin: 0 auto;
}

.card {
  background-color: #fff;
  border-radius: 12px;
  margin: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 账户信息卡片特殊处理，左侧内边距与服务卡片一致 */
.card:has(.accounts-list) {
  padding-left: 8px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.view-all {
  display: flex;
  align-items: center;
  color: #666;
  font-size: 14px;
  cursor: pointer;
}

.view-all .van-icon {
  margin-left: 4px;
  font-size: 12px;
}

/* 服务快捷入口 */
.service-card {
  padding: 16px 8px;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px 8px;
}

.service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.service-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  font-size: 24px;
  color: white;
  transition: transform 0.2s;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.service-item:active .service-icon {
  transform: scale(0.95);
}

.service-item span {
  font-size: 12px;
  color: #333;
}

.service-icon.deposit {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.service-icon.withdraw {
  background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
}

.service-icon.transfer {
  background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
}

.service-icon.record {
  background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
}

.service-icon.finance {
  background: linear-gradient(135deg, #FF9500, #FF5E3A);
}

.service-icon.mining {
  background: linear-gradient(135deg, #4A90E2, #5E5CE6);
}

.service-icon.team {
  background: linear-gradient(135deg, #AF52DE, #9B59B6);
}

.service-icon.performance {
  background: linear-gradient(135deg, #FFCC00, #FF9500);
}

.service-icon.more {
  background: linear-gradient(135deg, #8E8E93, #636366);
}

/* 账户列表 */
.accounts-list {
  margin-top: 12px;
}

.account-header {
  display: flex;
  align-items: center;
  padding-left: 8px;
}

.account-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 14px;
  overflow: hidden;
  color: white;
  font-weight: bold;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.currency-text {
  font-size: 16px;
  letter-spacing: 0.5px;
}

.account-icon.bg-green {
  background: linear-gradient(135deg, #10b981, #059669);
}

.account-icon.bg-blue {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.account-icon.bg-gold {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.account-icon.bg-default {
  background: linear-gradient(135deg, #64748b, #475569);
}

.account-details {
  flex: 1;
}

.account-name {
  font-size: 16px;
  font-weight: 500;
  color: #1e293b;
  margin-bottom: 4px;
}

.account-balance-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.account-balance {
  font-size: 14px;
  color: #64748b;
}

.account-frozen {
  font-size: 12px;
  color: #ef4444;
  margin-right: 16px;
}

/* 账户摘要 */
.account-summary {
  display: flex;
  align-items: center;
  padding: 16px 0;
  background-color: #f8fafc;
  border-radius: 8px;
  margin: 12px 0;
}

.summary-item {
  flex: 1;
  text-align: center;
}

.summary-divider {
  width: 1px;
  height: 30px;
  background-color: #e2e8f0;
}

.summary-label {
  font-size: 12px;
  color: #64748b;
  display: block;
  margin-bottom: 4px;
}

.summary-value {
  font-size: 16px;
  font-weight: 600;
}

.summary-value.income {
  color: #10b981;
}

.summary-value.expense {
  color: #ef4444;
}

/* 账户操作按钮 */
.account-actions {
  display: flex;
  margin-top: 16px;
}

.action-btn {
  flex: 1;
  height: 36px;
  line-height: 36px;
  text-align: center;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  color: white;
  cursor: pointer;
  transition: opacity 0.2s;
}

.action-btn:active {
  opacity: 0.8;
}

.deposit-btn {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  margin-right: 8px;
}

.withdraw-btn {
  background: linear-gradient(135deg, #10b981, #059669);
}


/* 订单列表 */
.order-list {
  margin-top: 12px;
}

.view-more {
  margin-top: 16px;
}

/* 空状态样式优化 */
.mini-empty {
  padding: 10px 0;
}

.mini-empty :deep(.van-empty__image) {
  width: 60px;
  height: 60px;
}

.mini-empty :deep(.van-empty__description) {
  margin-top: 4px;
  font-size: 14px;
}

.mini-empty :deep(.van-empty__bottom) {
  margin-top: 10px;
}

/* 标签页样式优化 */
:deep(.van-tabs__line) {
  background-color: #1989fa;
}

:deep(.van-tab--active) {
  color: #1989fa;
  font-weight: 500;
}

:deep(.van-tab) {
  padding: 0 12px;
}

/* 可复制文本样式 */
.copyable {
  position: relative;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.copyable:active {
  background-color: rgba(25, 137, 250, 0.1);
}

.copyable::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #ddd;
}

/* 绑定邀请人样式 */
.bind-inviter {
  color: #1989fa;
  cursor: pointer;
  text-decoration: underline;
}

.bind-inviter-popup {
  padding: 20px;
}

.popup-title {
  text-align: center;
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: 600;
}

.popup-actions {
  margin-top: 24px;
}
</style>
